<template>
	<view >
		<view class="header">
			<view class="fill-height el-flex">
				<view class="header-btn2" @click="Back()">
					<image src="../../static/images/left_b.png" mode=""></image>
				</view>
				<view class="placeholder text-ellipsis">
					评论详情
				</view>
				<view class="app-header-right"></view>
			</view>
		</view>
		<view class="comment-box">
			<view class="item">
				<view class="comment-header el-flex">
					<view class="avatar-img-box">
						<image :src="dataInfo.user_avatar" mode=""></image>
					</view>
					<view class="user-info ">
						<view class="name">
							{{dataInfo.user_name}}
						</view>
						<view class="comment-date">
							{{dataInfo.add_time}}
						</view>
					</view>
				</view>
				<view class="comment-content">
					<rich-text :nodes="dataInfo.comment_content" class="text"></rich-text>
					<view class="photos " :class="dataInfo.comment_full_images&&dataInfo.comment_full_images.length==1?'p1':'p2'">
						<block v-for="(img,imgIndex) in dataInfo.comment_full_images" :key="imgIndex">
							<image :src="img" mode="heightFix" @click="previewImage(imgIndex,dataInfo.comment_full_images)">
							</image>
						</block>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				comment_id: '',
				dataInfo: {}
			};
		},
		methods: {
			Back() {
				uni.navigateBack(-1)
			},
			previewImage(index, photoList) {
				uni.previewImage({
					current: index,
					urls: photoList,
					loop: true,
					indicator: 'number'
				})
			},
			getUserComment() {
				this.$request.get('/getUserComment', {
					'comment_id': this.comment_id,
				}).then((res) => {
					this.dataInfo = res.data.data
				}).catch(e => {
					console.log('错误了:', e)
				})
			}
		},
		onLoad(e) {
			
			this.comment_id = e.comment_id
			this.getUserComment()
		}
	}
</script>

<style lang="scss" scoped>
	view {
		font-size: .22rem;
		line-height: 1.15;
		font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
	}

	.header {
		height: .95rem;
		background-color: rgb(242, 242, 242);

		.fill-height {
			height: 100%;

			.header-btn2 {
				display: block;
				width: 0.6rem;
				margin: 0 0.2rem;

				image {
					width: 0.5rem;
					height: 0.5rem;
				}
			}

			.app-header-right {
				min-width: 1rem;
			}

			.placeholder {
				flex: 1;
				text-align: center;
				font-size: .3rem;
				min-width: 0;
				width: 100%;
				color: rgb(102, 102, 102);
			}
		}
	}

	.comment-box {
		background: #fff;
		text-align: left;

		.bd-top-1px {
			&:before {
				content: "";
				display: block;
				position: absolute;
				border-top: 1px solid #d9d9d9;
				left: 0;
				top: 0;
				width: 100%;
				transform-origin: 0 top;
			}
		}

		.item {
			position: relative;
			padding: 0.24rem 0.32rem 0.32rem;

			.comment-header {
				flex-wrap: nowrap;
				margin-bottom: 0;

				.avatar-img-box {
					margin-right: 0.24rem;
					width: 0.8rem;
					height: 0.8rem;
					overflow: hidden;
					border-radius: 100%;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.user-info {
					flex: 1 1 auto;
					text-align: left;

					.name {
						font-size: .26rem;
					}

					.comment-date {
						margin-top: 0.05rem;
						color: rgba(0, 0, 0, .54);
					}
				}


			}

			.comment-content {
				.text {
					display: inline-block;
					padding: 0.12rem 0;
					line-height: 1.5em;
					font-size: .26rem;
				}

				.photos {
					margin-bottom: 0.12rem;

					image {
						width: 1.6rem;
						height: 1.6rem;
						margin: 0 0.08rem 0.08rem 0;
					}
				}

				.p2 {
					image {
						width: 1.6rem !important;
						height: 1.6rem !important;
					}
				}

				.p1 {
					text-align: center;
					height: 3rem;
					width: auto;

					image {
						height: 100%;
					}
				}
			}
		}
	}
</style>